<template>
	<div class="main">
		<div class="main-header" style="justify-content: space-between;">
			<!-- <el-button
                v-for="(item, index) in buttons"
                :key="index"
                :type="item.path | formatType"
                :icon="item.icon"
                :disabled="item.path | formatDisabled(selection)"
                @click="tapButton(item)"
                >{{ item.title }}</el-button
            > -->
			<div style="display: flex;">
				<el-input placeholder="请输入用户名、手机号、充值单号模糊查询" style="width: 320px;margin-right: 10px;"
					v-model="searchParamCp.keyword" size="mini" clearable>
				</el-input>
				<el-select v-model="searchParamCp.type" size="mini" placeholder="请先选择充值类型"
					style="width: 200px;margin-right: 10px;">
					<el-option v-for="(item,index) in catelist" :key="index" :label="item.title" :value="item.id">
					</el-option>
				</el-select>
				<div class="timepick" style="margin-right: 10px;">
					<el-date-picker clearable v-model="searchParamCp.createtime" value-format="yyyy-MM-dd" size="mini"
						type="daterange" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期">
					</el-date-picker>
				</div>
				<el-button type="primary" size="mini" @click="searchs()">搜索</el-button>
				<el-button size="mini" @click="reset()">重置</el-button>
				<el-button size="mini" type="primary" @click="exportExcel">导出</el-button>
			</div>
		</div>
		<el-table ref="table" class="main-table" :data="memberData" height="100%" border
			header-cell-class-name="main-table-header" @selection-change="onSelectionChange">
			<el-table-column type="selection" width="39"></el-table-column>
			<el-table-column width="100px" align="center" label="用户名" prop="wxName" />
			<el-table-column width="120px" align="center" label="电话号码" prop="mainPhone" />
			<el-table-column align="center" width="180px" label="卡号" prop="card_no" />
			<!-- <el-table-column align="center" width="120px" label="卡内余额" prop="acc_bal" /> -->
			<el-table-column align="center" label="充值单号" prop="order_sn" />
			<el-table-column align="center" width="120px" label="充值金额" prop="money" />

			<el-table-column align="center" width="180px" label="上游流水号" prop="trade_no" />
			<!-- 新增type查询，充值类型  1福利卡充值 2后台充值  3微信充值 -->
			<el-table-column align="center" label="充值类型" prop="type">
				<template slot-scope="{row}">
					<el-tag type="warning" v-if="row.type==1">福利卡充值</el-tag>
					<el-tag v-if="row.type==2">后台充值</el-tag>
					<el-tag type="success" v-if="row.type==3">微信充值</el-tag>
				</template>
			</el-table-column>
			<!-- status 0失败  1成功 -->
			<el-table-column align="center" label="支付状态" prop="status">
				<template slot-scope="{row}">
					<el-tag type="danger" v-if="row.status==0">失败</el-tag>
					<el-tag v-if="row.status==1">成功</el-tag>
				</template>
			</el-table-column>
			<el-table-column align="center" label="充值时间" prop="addtime">
				<template slot-scope="{row}">
					{{row.createtime|formatDate}}
				</template>
			</el-table-column>

		</el-table>
		<el-pagination class="main-pagination" :current-page.sync="page" :page-size="limit" :total="total"
			@current-change="onCurrentChange" layout="total,jumper,prev,pager,next"></el-pagination>
	</div>
</template>

<script>
	import {
		get,
		post
	} from "@/assets/js/http.js";
	import {
		Result
	} from "element-ui";
	import FileSaver from 'file-saver'
	export default {
		name: "view-freeca",
		data() {
			return {
				memberData: [],
				searchParamCp: {},
				searchinfo: {
					keyword: '',
					createtime: [],
					type:''
				},
				page: 1,
				limit: 20,
				total: 0,
				catelist:[{id:1,title:'福利卡充值'},{id:2,title:'后台充值'},{id:3,title:'微信充值'},]
			}
		},
		mounted() {
			this.getTableList()
		},
		methods: {
			searchs() {

				this.page = 1
				this.searchinfo = {
					...this.searchinfo,
					...this.searchParamCp
				}
				this.getTableList()
			},
			reset() {
				this.page = 1
				this.searchParamCp = {}
				this.searchinfo = {
					keyword: '',
					createtime: [],
					type: '',
					pay_status: ''
				}
				this.getTableList()
			},
			onSelectionChange(selection) {
				this.selection = selection;
			},
			async getTableList() {
				const data = await get({
					url: '/admin/finance.Recharge/index',
					// params: this.searchinfo,
					params: {
						page: this.page,
						limit: this.limit,
						...this.searchinfo,
						...{
							createtime: this.searchinfo.createtime.length ? this.searchinfo.createtime.join(
								' - ') : ''
						}
					},
					loading: true,

				});
				const list = data.list
				this.total = data.total
				this.memberData = list
			},
			onCurrentChange(index) {
				this.page = index;
				this.$nextTick(() => {
					this.getTableList();
				})

			},
			exportExcel() {
				get({
					url: '/admin/finance.Recharge/exportCard',
					export:true,
					params: {
						...this.searchinfo,
						...{
							createtime: this.searchinfo.createtime.length ? this.searchinfo.createtime.join(
								' - ') : ''
						}
					}
				}).then(res=>{
					let link = document.createElement('a')
					FileSaver.saveAs(res,'充值报表.xlsx')
				})
			}
		}
	}
</script>